// .jsx -> .tsx 
// App <- Hello
// 父组件 向子组件提供props 以便于jsx的输出
// 子组件 打工的 prop-types 拒绝裸奔
// 面向对象之中，特性 父子组件间的约定 负责?
// interface 接口
import React, * as react from 'react'
// 定义一个接口 父子组件间用
// 子组件 需要实现props里面 规定的接口属性和方法
// ts 语法能力、面向对象的能力更nb
// ts 可以让我们java一样
// 接口定义区域
interface Props{
    userName:string;
    age: number;
}
// 接口和组件结合 组件要实现接口
// props? {} 空对象
// 泛型 props:Props -> <Props>
// React.FC 类型定义由 @types/react 提供
const HelloComponent:React.FC<Props> = (props)=>{
    return(
        <h2>
            hello user:{props.userName}!
            <br />
            年纪:{props.age}!
        </h2>
    )
}
export default HelloComponent